<template>
	<div class="formContainer">
		<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
			<p>分数： {{ sizeForm.score }}</p>
			<el-form-item
				label="昵称"
				prop="name"
				:rules="[{ required: true, message: '昵称不能为空哦~' }]">
				<el-input v-model="sizeForm.name" maxlength="10"></el-input>
			</el-form-item>
			<el-form-item size="large">
				<el-button type="primary" @click="submitScore">提交分数</el-button>
				<el-button @click="quitScore">取消提交</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from 'axios';

	export default {
		data() {
			return {
				// name: 'AuthorName',
				sizeForm: {
					name: '',
					// score: this.props.score,
					score: 0,
				},
			};
		},
		props: {
			score: Number,
		},
		methods: {
			backHome() {
				this.$router.push({
					name: 'homepage',
				});
			},
			submitScore() {
				if (this.sizeForm.name !== '') {
					console.log('submit!');
					console.log(this.sizeForm.score);
					axios({
						url: 'http://43.138.47.105/api/submitScore',
						// url: 'http://localhost:8080/api/submitScore',
						method: 'post',
						headers: {
							'Content-Type': 'application/json;',
						},
						data: {
							username: this.sizeForm.name,
							score: this.sizeForm.score,
							achievements: this.sizeForm.score / 10,
						},
					}).then((result) => {
						console.log(result);
						// alert('提交成功');
						localStorage.removeItem('gameState');
						this.$router.go(0);
					});
				}
			},
			quitScore() {
				localStorage.removeItem('gameState');
				this.$router.go(0);
			},
		},
		mounted() {
			this.sizeForm.score = JSON.parse(localStorage.getItem('gameState')).score;
			// console.log(JSON.parse(localStorage.getItem('gameState')).score);
		},
		updated() {
			// this.sizeForm.score = JSON.parse(localStorage.getItem('gameState')).score;
		},
	};
</script>

<style scoped>
	.formContainer {
		position: absolute;
		height: 550px;
		width: 500px;
		background-color: bisque;
		display: flex;
		left: calc(50% - 250px);
		padding-top: 50px;
		padding-left: 80px;
		z-index: 1000;
	}
</style>
